<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>
        <div :key="key" v-for="(url_arr, key) in url_arrs">
          <el-row>
            <el-col :span="24"
              ><div class="ep-bg-purple-dark" />
              {{ key }}<el-icon><PriceTag /></el-icon
            ></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col
              :span="4"
              :key="item.id"
              v-for="item in url_arr"
              @click="greet(item.url)"
            >
              <el-card shadow="hover" style="cursor: pointer;"> {{ item.title }} </el-card></el-col
            >
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>



<script>
import urls_json from '../assets/json/urls.json'
export default {
  name: "Index",
  // created() {
  //   // require引用时，放src和放statci都可以，建议放static
  //   const testJson = require('css/urls.json');
  //   this.url_arrs = testJson;
  //     console.log(testJson);
  // },

  data() {
    const url_arrs = urls_json;

    return {
      url_arrs,
    };
  },
  methods: {
    greet(href) {
      window.open(href, '_blank')
    },
  },
};
</script>
<style scoped>
.el-aside {
  background-color: #303133;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>